<template>
	<div style='height: 100%;'>
		<div id="echarts" v-show="alarmPieShow"></div>
		<div class="none" v-show="!alarmPieShow">
			<image src="../../static/img/no-alarm.png" mode=""></image>
			<div>七天内暂无报警</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		props: {
			deptId: {
				type: Number,
				default: 0
			},
			buildId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				endDate: '',
				startDate: '',
				isDept: uni.getStorageSync('userDept').isDept,
				alarmPieShow: true
			}
		},
		created() {

			let oneDay = 24 * 60 * 60 * 1000
			let endTime = new Date(Date.now() - oneDay)
			this.endDate = this.formatterDate(endTime, "yyyy-MM-dd")
			let startTime = new Date(Date.now() - 7 * oneDay)
			this.startDate = this.formatterDate(startTime, "yyyy-MM-dd")
		},
		methods: {
			//时间格式化
			formatterDate(date, fmt) {
				let nowDate = {
					yyyy: date.getFullYear(), // 年
					MM: date.getMonth() + 1, // 月份
					dd: date.getDate()+1, //日
					hh: date.getHours(),
					mm: date.getMinutes(),
					ss: date.getSeconds()
				}
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for (var k in nowDate) {
					if (new RegExp("(" + k + ")").test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (nowDate[k]) : (("00" + nowDate[k]).substr((
							"" + nowDate[k]).length)));
					}
				}
				return fmt;
			},
			async initPie(){
				let res = await this.$api.getAlarmContion({
					deptId: this.deptId,
					isDept: this.isDept,
					buildId: this.buildId,
					startDate: this.startDate,
					endDate: this.endDate
				
				})
				let index=0
				res.data.forEach(v => {
					if (v.value && v.value > 0) {
						index++
					}
				
				})
				if(index>0){
					this.alarmPieShow=true
					
				}else{
					this.alarmPieShow=false
					return
				}
				this.$nextTick(function(){
					var myChart = echarts.init(document.getElementById("echarts"))
					var option = {
						title: {
							text: '报警分析',
							left: '125px',
							top: '45%',
							textStyle: {
								fontSize: '14px',
								color: '#fff'
							}
					
						},
						subText: {
							textStyle: {
					
								color: '#fff'
							}
						},
						tooltip: {
							show:false
						},
						legend: {
							itemWidth: 10,
							itemHeight: 10,
							top: 'center',
							left: '80%',
							data: [{
									name: '误报'
								},
								{
									name: '火警'
								},
								{
									name: '测试'
								}
							],
							textStyle: {
								color: "#fff"
							}
						},
						series: [{
								name: '报警分析',
								type: 'pie',
								center: ['160px', '55%'],
								avoidLabelOverlap: false,
								itemStyle: {
									borderRadius: 10,
									borderWidth: 2
								},
								label: {
									color: "#fff",
									// 饼图文字的显示
									show: true, // 显示文字
									formatter: function(arg) {
										return arg.percent + '%'
									}
					
								},
								radius: ['65%', '75%'],
								emphasis: {
									label: {
										show: true,
										fontSize: '14'
									}
								},
								labelLine: {
									show: true
								},
								data: [{
										value: res.data[0].value,
										name: '火警',
										itemStyle: {
											color: 'rgba(255, 61, 61, 1)'
										}
									},
									{
										value: res.data[2].value,
										name: '测试',
										itemStyle: {
											color: 'rgba(79, 233, 210, 1)'
										}
									},
									{
										value: res.data[1].value,
										name: '误报',
										itemStyle: {
											color: 'rgba(255, 206, 127, 1)'
										}
									}
					
								]
					
							},
					
						],
					};
					myChart.setOption(option)
					window.addEventListener("resize", ()=>{
						myChart.resize()
					});
					
				})
			}
		},
		mounted() {
			this.initPie()
		},
		watch: {
		    buildId(val) {
		      if (val) {
				this.initPie()
		      }
		    }
		},
	}
</script>

<style lang="scss" scoped>
	#echarts {
		width: 100%;
		height: 100%;
	}
	.none{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.7);
		height:100%;
		image{
			width: 132px;
			height: 78px;
		}
	}
</style>
